<template>
	<view class="category">
		<view class="category-wrapper" v-if="catrgoryList.length > 0">
			<!-- 左边导航 -->
			<scroll-view scroll-y="true" class="left-wrapper" scroll-with-animation="true" :scroll-top="left_scroll">
				<view class="left-content">
					<view class="title-content" :class="select_index === index ? 'onSelected' : ''" v-for="(title, index) in catrgoryList" :key="title.id" @tap="choose(index)">
						{{ title.name }}
					</view>
				</view>
			</scroll-view>
			<!-- 右边内容 -->
			<scroll-view scroll-y="true" class="right-wrapper" scroll-with-animation="true" :scroll-top="right_scroll" @scroll="myscroll">
				<view class="right-content">
					<!-- banner区域 -->
					<view class="banner-wrapper">
						<swiper class="swiper-content" :autoplay="true" :interval="3000" :circular="true">
							<swiper-item class="swiper-item" v-for="imgs in swiperList" :key="imgs.id"><image class="swiper-img" :src="imgs.src"></image></swiper-item>
						</swiper>
					</view>
					<!-- 产品区 -->
					<view class="product-wrapper">
						<view class="category-item" :id="'list' + c_index" v-for="(c_item, c_index) in catrgoryList" :key="c_item.id">
							<view class="category-title">{{ c_item.name }}</view>
							<view class="category-content">
								<view class="product-item" @click="fnGetDetail()" v-for="(p_item, p_index) in c_item.content" :key="p_item.id">
									<image class="product-img" :src="p_item.thumb"></image>
									<text class="product-title">{{ p_item.cname }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windows_height: 0, //屏幕高度
				swiperList: [],
				catrgoryList: [],
				select_index: 0,
				right_height: [], //右侧每个内容的高度集合
				right_scroll: 0, //右侧的滑动值
				left_height: 0, //左侧总高度
				left_scroll: 0, //左侧滑动值
				last: 0,
			}
		},
		onLoad() {
			this.init();
			this.windows_height = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			init() {
							let res =
							{
							  "error": 0,
							  "data": {
								"banner": [
								  {
									"Imgid": 10,
									"src": "http://dummyimage.com/530x180"
								  },
								  {
									"Imgid": 11,
									"src": "http://dummyimage.com/530x180"
								  },
								  {
									"Imgid": 12,
									"src": "http://dummyimage.com/530x180"
								  }
								],
								"list": [
								  {
									"id": 0,
									"name": "化证据",
									"content": [
									  {
										"cid": 0,
										"cname": "心器知",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 1,
										"cname": "科效",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 2,
										"cname": "深照",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 3,
										"cname": "南利经",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 4,
										"cname": "打规报",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 5,
										"cname": "如每",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 6,
										"cname": "特最发",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 7,
										"cname": "多拉",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 8,
										"cname": "却作求",
										"thumb": "http://dummyimage.com/100x100"
									  }
									]
								  },
								  {
									"id": 1,
									"name": "革报意主",
									"content": [
									  {
										"cid": 9,
										"cname": "带它共",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 10,
										"cname": "使先与",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 11,
										"cname": "完省写",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 12,
										"cname": "解根她",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 13,
										"cname": "热马根",
										"thumb": "http://dummyimage.com/100x100"
									  }
									]
								  },
								  {
									"id": 2,
									"name": "思正起",
									"content": [
									  {
										"cid": 14,
										"cname": "农一象",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 15,
										"cname": "际放给",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 16,
										"cname": "始先",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 17,
										"cname": "前点广",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 18,
										"cname": "志设圆",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 19,
										"cname": "能金",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 20,
										"cname": "本安",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 21,
										"cname": "何层接",
										"thumb": "http://dummyimage.com/100x100"
									  }
									]
								  },
								  {
									"id": 3,
									"name": "家而化",
									"content": [
									  {
										"cid": 22,
										"cname": "很马建",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 23,
										"cname": "空单前",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 24,
										"cname": "面段",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 25,
										"cname": "反日两",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 26,
										"cname": "以报克",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 27,
										"cname": "派条传",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 28,
										"cname": "同局",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 29,
										"cname": "同想花",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 30,
										"cname": "重新",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 31,
										"cname": "上准越",
										"thumb": "http://dummyimage.com/100x100"
									  }
									]
								  },
								  {
									"id": 4,
									"name": "酸取当",
									"content": [
									  {
										"cid": 32,
										"cname": "金相太",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 33,
										"cname": "非治织",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 34,
										"cname": "北或完",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 35,
										"cname": "月能周",
										"thumb": "http://dummyimage.com/100x100"
									  },
									  {
										"cid": 36,
										"cname": "关争",
										"thumb": "http://dummyimage.com/100x100"
									  }
									]
								  }
								]
							  }
};
							this.catrgoryList = res.data.list;
							this.swiperList = res.data.banner;
							this.$nextTick(() => {
								this.getHeightList();
							})
							},
							
			
		
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery();
				selectorQuery.select('.left-content').boundingClientRect(function(rects) {
					_this.left_height = rects.height;
				});
				selectorQuery.selectAll('.category-item').boundingClientRect(function(rects) {
					_this.right_height = rects.map((item) => item.top);
					console.log(_this.right_height)
				}).exec();
			},
			choose(index) {
				if (this.select_index === index) {
					return;
				}
				this.select_index = index;
				// 加入防抖
				if (this.timeout) {
					clearTimeout(this.timeout); //清除计时器
				}
				this.timeout = setTimeout(() => {
					this.right_scroll = this.right_height[index] - 110;
				}, 300)
			},
			myscroll(e) {
				//引入节流
				let right_content_height = e.detail.scrollHeight - this.windows_height;
				if (right_content_height == e.detail.scrollTop) {
					return;
				}
				let scroll_top = e.detail.scrollTop + 110; //110是banner图的高度
				//判断当前的scrollTop在哪个区间内;
				let now = +new Date();
				if (now - this.last > 100) {
					this.last = now;
					let active_index = this.right_height.findIndex((value, index, arr) => value <= scroll_top && scroll_top < arr[index + 1]);
					this.select_index = active_index;
					if (this.left_height - this.windows_height) {
						//如果有超出部分
						let diff = this.left_height - this.windows_height
						this.left_scroll = Math.round((active_index * diff) / (this.catrgoryList.length - 1))
					}
				}
			},
			fnGetDetail(){
				uni.navigateTo({
					url: './detail'
				});
			}
		}
	}
</script>

<style lang="less">
.category {
	.category-wrapper {
		width: 100%;
		display: flex;
		flex-direction: row;
		position: absolute;
		top: 0;
		bottom: 0;

		.left-wrapper {
			width: 200rpx;
			flex: 0 0 200rpx;
			background-color: #f6f6f6;

			.left-content {
				.title-content {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 25rpx;
					border-bottom: 1px solid #dedede;
					cursor: pointer;

					&:last-child {
						border-bottom: 0;
					}

					&.onSelected {
						background-color: #fff;
						position: relative;
						color: #feb436;

						&::before {
							content: '';
							position: absolute;
							left: 0;
							top: 0;
							width: 10rpx;
							height: 100%;
							background: linear-gradient(124deg, #feb436 0%, #fb7c22 100%);
						}
					}
				}
			}
		}

		.right-wrapper {
			flex: 1;

			.right-content {
				width: 100%;
				padding: 20rpx 0;
				border-left: 1rpx solid #efefef;
				box-sizing: border-box;

				.banner-wrapper {
					padding: 0 20rpx;

					.swiper-content {
						width: 100%;
						height: 180rpx;
						margin-bottom: 20rpx;

						.swiper-item {
							.swiper-img {
								width: 100%;
								height: 180rpx;
							}
						}
					}
				}

				.product-wrapper {
					.category-item {
						.category-title {
							height: 60rpx;
							font-size: 26rpx;
							line-height: 60rpx;
							font-weight: 500;
							background-color: #f6f6f6;
							padding-left: 20rpx;
							color: #000;
						}

						.category-content {
							display: flex;
							flex-direction: row;
							flex-flow: wrap;
							padding: 20rpx 20rpx 0;

							.product-item {
								width: 33%;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								margin-bottom: 20rpx;

								.product-img {
									width: 120rpx;
									height: 140rpx;
									margin-bottom: 10rpx;
								}

								.product-title {
									font-size: 23rpx;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
